<script>
  import sheep from '@/sheep';

  export default {
    name: 'peoplePage',
    data() {
      return {
        // 设置选项
        peopleOptions: [
          { name: '编辑个人资料', imageName: 'pc_user_own' },
          // { name: '账号设置', imageName: 'pc_user_setting' },
          { name: '收货地址管理', imageName: 'pc_user_address' },
          { name: '发票管理', imageName: 'pc_user_means' },
          // { name: '权限设置', imageName: 'pc_user_key' },
          // { name: '政策协议', imageName: 'pc_user_person' },
          { name: '关于我们', imageName: 'pc_user_my' },
          { name: '退出登录', imageName: 'pc_user_means' },
        ],
      };
    },
    computed: {
      sheep() {
        return sheep;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      userInfo() {
        return sheep.$store('user').userInfo;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      nc_image_path() {
        return sheep.$store('AI').nc_image_path;
      },
    },
    methods: {
      goListPath(item) {
        switch (item.name) {
          case '编辑个人资料':
            sheep.$router.go('/pages/familyPage/personalData', {
              member_id: sheep.$store('user').userInfo.member_id,
              is_use: 1,
            });
            break;
          // case '账号设置':
          //
          //   break;
          case '收货地址管理':
            sheep.$router.go('/pages/user/address/list');
            break;
          case '发票管理':
            sheep.$router.go('/pages/user/invoice/list');
            break;
          case '关于我们':
            sheep.$router.go('/pages/public/richtext', {
              id: 3,
              title: '关于我们',
            });
            break;
          case '退出登录':
            uni.showModal({
              title: '提示',
              content: '确认退出账号？',
              success: async function(res) {
                if (res.confirm) {
                  const result = await sheep.$store('user').logout();
                  if (result) {
                    await sheep.$store('AI').resetSessionList();
                    await sheep.$store('family').setFamilyTree();
                    uni.removeStorageSync('account-list')
                    uni.navigateTo({
                      url: '/pages/pc/login',
                    });
                  }
                }
              },
            });
            break;
        }
      },
    },
  };
</script>

<template>
  <view style="width: 100%;background: #FFFFFF;border-radius: 8px;" class="flex-sub flex align-center flex-column">
    <view style="width: 100%;"
          class="flex align-center justify-between "
    >
      <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
            class="flex align-center justify-between">
        <view class="flex align-end" style="margin-left: 20px;">
          <view class="flex align-center">
            <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
            <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
              设置
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-row style="width: 100%;" class="flex flex-column align-center flex-sub">
      <uni-col :xs="24" :sm="24" :md="20" :lg="14" :xl="12"
               class="flex-sub flex flex-column align-center justify-center">
        <view style="width: 100%;height: 98%;border-radius: 8px;border: 1px solid #EDEDED"
              class="bg_FFFFFF flex flex-column align-center"
        >
          <view style="width: 80%;padding: 10px 0;"
                class="flex align-center justify-between">
            <view class="flex align-center flex-sub" style="margin-left: 20px;">
              <image
                :src="userInfo.avatar.indexOf('http') != -1 ? userInfo.avatar : `${nc_image}${userInfo.avatar}`"
                style="width: 30%;border-radius: 50%"
                mode="widthFix"
              ></image>
              <view style="margin-left: 10px;">
                <view style="font-size: 29px;font-weight: 500;color: #5C5C5C;">
                  {{ userInfo.nickname }}
                </view>
                <view style="font-size: 19px;font-weight: 400;color: #5C5C5C;margin-top: 5px;">
                  拾亲号: {{ userInfo.uid }}
                </view>
              </view>
            </view>
            <view class="flex-sub flex align-center justify-end" style="margin-right: 20px;">
              <image style="width: 30%;cursor:pointer;"
                     :src="`${nc_image_path}/user_nc_qrcode.png`"
                     mode="widthFix"
              ></image>
            </view>
          </view>
          <view class="flex-sub flex flex-column align-center" style="width: 80%;position: relative;">
            <view class="bg_F5F5F5 flex flex-column align-center"
                  style="border-radius: 8px;width: 100%;height: 96%;position: absolute;top: 2%;overflow-y: scroll"
            >
              <view v-for="(item,index) in peopleOptions" :key="index"
                    style="width: 80%;cursor:pointer;padding: 10px 0"
                    :style="{
                      borderBottom: index == peopleOptions.length - 1 ? 'none' : '1px solid #E8E8E8'
                    }"
                    class="flex align-center"
                    @click.stop="goListPath(item)"
              >
                <view style="width: 100%;padding: 10px 0" class="flex align-center">
                  <view style="background: #FF7950;padding: 10rpx 10rpx;border-radius: 5px" class="flex align-center">
                    <image mode="widthFix"
                           :src="sheep.$url.cdn(`/assets/matchmaking/index/${item.imageName}.png`)"
                           style="width: 50rpx;"
                    ></image>
                  </view>
                  <view style="font-size: 28px;color: #363636;font-weight: 500;margin-left: 10px;">
                    {{ item.name }}
                  </view>
                </view>
                <text class="iconfont icon-ic_rightarrow"
                      style="font-size: 28px;font-weight: 500;color: #363636;"></text>
              </view>
            </view>
          </view>
        </view>
      </uni-col>
    </uni-row>
  </view>
</template>

<style scoped lang="scss">

</style>